<template>
  <v-toolbar color="blue-grey-darken-3">
    <template v-slot:prepend>
      <div class="text-h7">教务管理系统</div>
    </template>

    <v-divider class="ms-3" inset vertical></v-divider>

    <v-spacer></v-spacer>

    <v-spacer></v-spacer>
  </v-toolbar>
  <v-card flat title="成绩登记">
    <template v-slot:text>
      <div class="d-flex flex-row">
        <v-combobox
          label="选择课程"
          :items="courses"
          v-model="selectedCourse"
          @update:model-value="select_course()"
        ></v-combobox>
      </div>
    </template>
    <v-btn icon="mdi-content-save-all" style="margin-left: 20px" @click="this.resulting=true"></v-btn>
    <v-data-table :headers="headers" :items="items">
      <template v-slot:item="{ item }">
        <tr>
          <td>{{ item.student_id }}</td>
          <td>{{ item.sname }}</td>
          <td>{{ item.grade }}</td>
          <td>
            <v-text-field
              v-model="item.normal_score"
              label="平时成绩"
              @update:focused="change_score(item)"
              :rules="[rules.score]"
            ></v-text-field>
          </td>
          <td>
            <v-text-field
              v-model="item.test_score"
              label="考试成绩"
              @update:focused="change_score(item)"
            ></v-text-field>
          </td>
          <td>{{ item.total_score }}</td>
        </tr>
      </template>
    </v-data-table>
  </v-card>
  <v-dialog v-model="resulting" width="auto" persistent>
    <v-card width="400" height="120">
      <v-card-text>
        保存成功
      </v-card-text>
      <v-card-actions>
        <v-btn color="primary" block @click="resulting = false">确认</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  <v-dialog v-model="studentDialog" max-width="500px">
    <v-card>
      <v-card-title>查找学生</v-card-title>
      <v-card-text>
        <v-form>
          <!-- 在这里添加输入框 -->
          <v-text-field
            v-model="stu_searching"
            label="学号"
            @update:model-value="searchStudent"
          ></v-text-field>
          <v-card :text="stu_searching_result"></v-card>
        </v-form>
      </v-card-text>
      <v-card-actions>
        <v-btn @click="add_student">确定</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import axios from "axios";
export default {
  async created() {
    let new_courses = [];
    let staff_id = this.$root.userinfo.id;
    await axios({
      method: "get",
      url: "http://127.0.0.1:8000/teacher/course_query",
      params: {
        staff_id: staff_id,
      },
    }).then((res) => {
      console.log(res);
      new_courses = res.data.data;
    });
    console.log(new_courses);
    let new_courses_name = [];
    for (let i = 0; i < new_courses.length; i++) {
      new_courses_name.push(new_courses[i][0]);
    }
    this.courses = new_courses_name;
    this.courses_data = new_courses;
  },
  data() {
    return {
        rules:{
            score:value=>{
                if(value<0||value>100){
                    return '0-100'
                }
                return true
            }
        },
      //"student_id","sname","grade","sex","mobile_phone","dept_name"
      headers: [
        { key: "student_id", title: "学号" },
        { key: "sname", title: "姓名" },
        { key: "grade", title: "年级" },
        { key: "normal_score", title: "平时成绩" },
        { key: "test_score", title: "考试成绩" },
        { key: "total_score", title: "总评成绩" },
      ],
      items: [],
      courses: [],
      selectedCourse: "",
      studentDialog: false,
      stu_searching: "",
      stu_searching_result: "",
      selectedCourse_data: [],
      resulting: false,
    };
  },
  methods: {
    async select_course() {
      //判断this.selected_course是否为空
      if (!this.selectedCourse) {
        return;
      }
      let staff_id = this.$root.userinfo.id;
      let new_items = [];
      console.log(this.selectedCourse);
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/teacher/student_score",
        params: {
          course_name: this.selectedCourse,
          staff_id: staff_id,
        },
      }).then((res) => {
        console.log(res);
        new_items = res.data.data;
      });
      this.items = new_items;
      console.log(this.items);
    },
    async change_score(item) {
      item.normal_score = Number(item.normal_score);
      item.test_score = Number(item.test_score);
      item.total_score = Math.trunc(
        (Number(item.normal_score) + Number(item.test_score)) / 2
      );
      console.log(item);
      let staff_id = this.$root.userinfo.id;
      let new_items = [];
      console.log(this.selectedCourse);
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/teacher/mod_score",
        params: {
          course_name: this.selectedCourse,
          staff_id: staff_id,
          student_id: item.student_id,
          normal_score: item.normal_score,
          test_score: item.test_score,
          total_score: item.total_score,
        },
      }).then((res) => {
        console.log(res);
      });
      console.log(this.items);
    },
  },
};
</script>
